<template>
  <div class="custom-tree-container">
    <el-tree
        :data="dataSource"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
          <template v-if="node.file == 1">
            <el-icon><Folder /></el-icon>
          </template>
        <template v-else>
          <el-icon><Postcard /></el-icon>
        </template>
          <span>{{ node.label }}</span>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Tree {
  id: number
  label: string
  file?:number,
  children?: Tree[]
}


const dataSource = ref<Tree[]>([
  {
    id: 1,
    label: 'node1',
    file:1,
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        file:1,
        children: [
          {
            id: 9,
            file:1,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'node2',
    children: [
      {
        id: 5,
        label: 'node3',
      },
      {
        id: 6,
        file:1,
        label: 'file1',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
